import React, { Component } from 'react';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row,
  Col,
  Input,
  Select,
  Modal,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;

interface SaveAreaProps extends FormComponentProps {
  saveVisible: boolean;
  recordArea:any;
  searchValues:any;
  handleCancel: (value: boolean) => void;
  fetchAction: (typeName: string, payload: any) => void;
}

class SaveAreaElem extends Component<SaveAreaProps> {
  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel(false);
  }

  handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((errors, values) => {
      if (errors) return;

      const {
        fetchAction,
        searchValues,
        recordArea: { id, gardenId, serialNo },
      } = this.props;
      if (id) {
        const new_values = {
          ...values,
          id,
          gardenId,
          serialNo,
          searchValues,
        };
        fetchAction('updateArea', new_values);
      } else {
        fetchAction('saveArea', values);
      }

      this.handleCancel();
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      saveVisible,
      recordArea,
    } = this.props;

    return (
      <Modal
        title={!recordArea.id ? '添加区域' : '编辑区域'}
        visible={saveVisible}
        destroyOnClose
        width={400}
        onOk={this.handleSubmit}
        onCancel={this.handleCancel}
        okText="保存"
      >
        <Form
          hideRequiredMark
          className="tableListForm"
          onSubmit={this.handleSubmit}
        >
          <Row gutter={12}>
            <Col span={24}>
              <Item label="区域名称" colon={false}>
                {getFieldDecorator('name', {
                  initialValue: recordArea.name,
                  rules: [{ required: true, message: '请输入区域名称' }],
                })(<Input allowClear placeholder="请输入区域名称" />)}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　序号" colon={false}>
                {getFieldDecorator('serialNo', {
                  initialValue: recordArea.serialNo,
                  rules: [{ required: true, message: '请输入序号' }],
                })(<Input
                  allowClear
                  placeholder="请输入序号"
                  disabled={!!recordArea.serialNo}
                />)}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="是否显示" colon={false}>
                {getFieldDecorator('valid', {
                  initialValue: recordArea.valid === undefined ? 1 : recordArea.valid,
                  rules: [{ required: true, message: '请选择是否显示' }],
                })(
                  <Select>
                    <Option value={1}>是</Option>
                    <Option value={0}>否</Option>
                  </Select>,
                )}
              </Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<SaveAreaProps>()(SaveAreaElem);
